<template>
	<view class="indexPage" :style = "{height: DomHeight}">
		<u-swiper :list="list1" indicator indicatorMode="dot" circular height="60vw" radius="0px" @click="goDetail">
		</u-swiper>
		<view class="searchContent">
			<u--input shape="circle" inputAlign="center" placeholder="搜索123" suffixIcon="search"
				:suffixIconStyle="iconClass" @focus="goSearch"></u--input>
		</view>
		<bar title="产品展示" :isLink="true" url="/pages/solution/solution"></bar>
		<view class="slideContent">
			<view class="slideItem" v-for="(item,index) in list3" :key='index' @click="goSolutionDetail(item)">
				<u--image class="slideImage" :src="item.images?($appFunc.getFileUrl(item.images)):''"
					shape="square" mode="aspectFill" width="440rpx" height="250rpx"></u--image>
				<view class="slideInfo">
					{{item.describeDesc}}
					<!-- <u-parse :content="item.content"></u-parse> -->
				</view>
			</view>
		</view>
		<bar title="资讯&技术" :isLink="false" url="/pages/news/news"></bar>
		<view class="tabAndFilter"  v-if="isLoad">
			<view class="tabContent">
				<view @click="doFilter(item)" v-for="(item,index) in tabs" :key="index" class="tabItem"
					:class="activeTab===item.id?'isActive':''">{{item.classificationName}}</view>
			</view>
			<!-- <view class="filterContent">
				<u--image src="/static/community/2.png" shape="square" mode="aspectFill" width="30rpx"
					height="30rpx" bgColor="transparent" @click="showFilterPanel=!showFilterPanel"></u--image>
				<view class="filterList" v-if="showFilterPanel">
					<view class="item" v-for="(item,index) in filters" :key="index" @click="changeFilter(item)">
						{{item.name}}
						<u--image v-if="activeFilter===item.id" src="/static/community/3.png" shape="square"
							mode="aspectFill" width="28rpx" height="18rpx" bgColor="transparent"></u--image>
					</view>
				</view>
			</view> -->
		</view>
		<view class="listContent">
			<view class="listItem" v-for="(item,index) in list2" :key='index' @click="goNewsDetail(item)">
				<u--image class="listImage" :src="item.images?$appFunc.getFileUrl(item.images):''" shape="square"
					mode="aspectFill" width="240rpx" height="180rpx" radius="8rpx"></u--image>
				<view class="infoContent">
					<view class="listTitle">{{item.name}}</view>
					<view class="listInfo">
						{{item.describeDesc}}
						<!-- <u-parse :content="item.content"></u-parse> -->
					</view>
					<view class="detailInfo">
						<view>{{getReleaseTime(item.releaseTime)}}</view>
						<!-- <view>{{item.readingVolume}}阅读</view> -->
					</view>
				</view>
			</view>
		</view>
		<view class="loadMoreBtn">
			<!-- <u-loadmore :status="hasData>5?'loadmore':'nomore'" loadmore-text="加载更多" nomore-text="没有更多了"
				color="#ccc" /> -->
				<u-loadmore :status="isLoading?'loading': (pageParams.pageNumber >= pageParams.totalPages ? 'nomore' : 'loadmore')" loading-text="正在加载" loadmore-text="加载更多"
					nomore-text="没有更多了" color="#d0d0d0" />
		</view>
		<view class="copyright" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}">
			<view class="privacyStatement">
				<view @click="goPrivacyStatement" class="item specialItem">《隐私声明》</view>
				<view @click="goInfringementStatement" class="item">《侵权声明》</view>
			</view>
			<view class="privacyStatements">苏ICP备11075574号-3</view>
		</view>
		<view class="content">
			<tabbar :current="0"></tabbar>
		</view>
		<!-- 公共签到弹窗组件 -->
		<signin ref="signinRef" />
	</view>
</template>

<script>
	import Tabbar from "@/components/tabbar.vue";
	import Bar from "@/components/bar.vue";
	import Signin from "@/components/signin.vue";
	export default {
		components: {
			Tabbar,
			Bar,
			Signin
		},
		onShow() {
			let that = this
			uni.hideTabBar({
				animation: false
			})
			uni.getSystemInfo({
				success: function(res) {
					let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
					model.forEach(item => {
						//适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
						if (res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
							that.paddingBottomHeight = 40;
							that.DomHeight = "calc(100vh - 140rpx)"
						}
					})
				}
			});
			if (this.isLoad) {
				this.$refs.signinRef.checkSignIn()
			} else {
				this.isLoad = true
			}
			
		},
		data() {
			return {
				api: this.$api.baseUrl,
				iconClass: {
					color: "#004DA1",
					fontSize: "52rpx",
					borderLeft: "1rpx solid #D0D0D0",
					padding: "0 0 0 38rpx"
				},
				list1: [],
				list1Data: [],
				list2: [],
				list3: [],
				inputStyle: {
					background: "transparent"
				},
				DomHeight:"calc(100vh - 100rpx)",
				isLoad: false,
				pageParams:{
					pageSize: 10,
					pageNumber: 1,
					total:1,
					totalPages:1,
				},
				isLoading: false,
				tabs: [],
				activeTab: "",
				paddingBottomHeight: 0,  //苹果X以上手机底部适配高度
				isLoad: false
			}
		},
		onPullDownRefresh() {
			this.clearList()
			Promise.all([
				this.$request.get(this.$api.getBanner, {
					type: 1
				}),
				this.$request.get(this.$api.getNewsList, {
					type: '2',
					pageNo: this.pageParams.pageNumber,
					pageSize: this.pageParams.pageSize,
					classificationId: this.activeTab
				}),
				this.$request.get(this.$api.getNewsList, {
					type: '1',
					pageNo: "1",
					pageSize: "5"
				})
			]).then(res => {
				uni.stopPullDownRefresh()
				this.list1 = [];
				res[0].result.map(item => {
					// this.list1.push(this.$api.baseUrl + "/sys/common/static/" + item.url)
					this.list1.push(this.$appFunc.getFileUrl(item.url))
				})
				this.list1Data = res[0].result
				this.list2 = res[1].result.records
				this.list3 = res[2].result.records
				uni.hideLoading()
			})
		},
		computed: {
			getReleaseTime(date) {
				return function(date) {
					if (date) {
						if (typeof date === 'number') {
							return new Date(date).format("YYYY-MM-dd hh:mm")
						} else {
							return new Date(date.replace(/\-/g, "/")).format("YYYY-MM-dd hh:mm")
						}
					} else {
						return ""
					}
				}
			}
		},
		onReachBottom() {
			// console.log('this.isLoading', this.isLoading, this.pageParams)
			if (!this.isLoading) {
				if (this.pageParams.pageNumber < this.pageParams.totalPages) {
					this.pageParams.pageNumber++
					this.pageQuery()
				}
			}
		},
		onLoad() {
			Promise.all([
				this.$request.get(this.$api.getBanner, {
					type: 1
				}),
				this.$request.get(this.$api.getNewsList, {
					type: '2',
					pageNo: this.pageParams.pageNumber,
					pageSize: this.pageParams.pageSize
				}),
				this.$request.get(this.$api.getNewsList, {
					type: '1',
					pageNo: "1",
					pageSize: "5"
				}),
				this.$request.get(this.$api.getNewsColumns, {
					pageNo: 1,
					pageSize: 100,
					type: 1
				})
			]).then(res => {
				this.list1 = []
				res[0].result.map(item => {
					this.list1.push(this.$appFunc.getFileUrl(item.url))
				})
				this.list1Data = res[0].result
				this.list2 = res[1].result.records
				this.pageParams.totalPages = res[1].result.pages
				this.pageParams.total = res[1].result.total
				this.list3 = res[2].result.records
				// this.tabs =[{
				// 	id: "",
				// 	columnName: "全部"
				// }];
				// this.tabs = this.tabs.concat(res[3].result.records)
				this.tabs = this.tabs.concat(res[3].result.records);
				this.tabs.unshift({
					classificationName: "全部",
					id: ""
				})
				this.activeTab = this.tabs[0].id;
				uni.hideLoading()
			})
		},
		methods: {
			updateArticle(article){
				this.list2.forEach((item,index) => {
					if(item.id == article.id){
						this.$set(this.list2, index, article)
					}
				})
			},
			pageQuery() {
				this.getListPage()
			},
			clearList() {
				this.list2 = []
				this.pageParams = {
					pageSize: 10,
					pageNumber: 1,
					total:1,
					totalPages:1,
				}
				this.activeTab = ''
			},
			getListPage(isRefresh) {
				this.isLoading = true
				this.$request.get(this.$api.getNewsList, {
					type: 2,
					pageNo: this.pageParams.pageNumber,
					pageSize: this.pageParams.pageSize,
					classificationId: this.activeTab
				}).then(res => {
					// if (isRefresh) {
					// 	uni.stopPullDownRefresh()
					// }
					this.isLoading = false
					this.list2 = this.list2.concat(res.result.records)
					this.pageParams.totalPages = res.result.pages
					uni.hideLoading()
				}).catch(e => {
					this.isLoading = false
					uni.hideLoading()
				})
			},
			getHeight(){
				// let arrLength = this.resArr.length;
				      return `height: calc((100% - 200px));`
			},
			doSearch() {
				if (!this.isLoading) {
					this.pageParams.pageNumber = 1;
					this.list2 = [];
					this.getListPage(true);
				}
			},
			doFilter(item) {
				if (this.activeTab === item.id) return;
				this.activeTab = item.id;
				this.doSearch()
			},
			goSearch(){
				uni.navigateTo({
					url:"/pages/search/search"
				})
			},
			goDetail(index) {
				console.log('index', index, this.list1Data)
				if (this.list1Data[index].link == '/pages/growup/growup') {
					uni.switchTab({
						url: this.list1Data[index].link
					})
				} else if (this.list1Data[index].link) {
					uni.navigateTo({
						url: this.list1Data[index].link+"?id="+this.list1Data[index].id
					})
				}
			},
			goSolutionDetail(item) {
				uni.navigateTo({
					url: "../solutionDetial/solutionDetial?id=" + item.id,
				})
			},
			goNewsDetail(item) {
				uni.navigateTo({
					url: "../newsDetial/newsDetial?id=" + item.id,
				})
			},
			goPrivacyStatement() {
				uni.navigateTo({
					url: "/pages/privacyStatement/privacyStatement"
				})
			},
			goInfringementStatement() {
				uni.navigateTo({
					url: "/pages/infringementStatement/infringementStatement"
				})
			},
			callMe(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			savePhoto(url) {
				uni.saveImageToPhotosAlbum({
					filePath: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.indexPage {
		
		// height: calc(100vh - 100rpx);
		// overflow-y: auto;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.searchContent {
		padding: 20rpx 40rpx 10rpx;
		background-color: #FAFAFA;
		.u-input{
			height:40rpx;
			line-height: 40rpx;
			font-size: 24rpx;
			border: 1px solid #d0d0d0!important;
		}
	}

	.slideContent {
		display: flex;
		justify-content: flex-start;
		flex-wrap: nowrap;
		width: calc(100vw - 120rpx);
		overflow-y: hidden;
		overflow-x: auto;
		padding: 10rpx 40rpx;

		.slideItem {
			border-radius: 20rpx!important;
			margin-right: 20rpx;
			width: 440rpx;
			overflow: hidden;
			flex-shrink: 0;
			background-color: #fff;
			box-shadow: 0px 1rpx 0rpx 1rpx rgba(230, 230, 230, .5);

			.slideInfo {
				color: #999999;
				height: 120rpx;
				padding: 24rpx;
				padding-bottom: 0;
				margin-bottom: 24rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
				letter-spacing: 2rpx;
				font-size: 28rpx;
				line-height: 40rpx;
				font-family: PingFang SC-Regular, PingFang SC;
			}
		}
	}
	.tabAndFilter {
		display: flex;
		justify-content: flex-start;
	
		.tabContent {
			display: flex;
			flex-wrap: nowrap;
			justify-content: flex-start;
			padding: 0 40rpx;
			width: calc(100vw - 80rpx);
			overflow: auto;
	
			.tabItem {
				background: #F4F4F4;
				border-radius: 4px 4px 4px 4px;
				color: #333333FF;
				font-size: 26rpx;
				height: 62rpx;
				padding: 0 16rpx;
				line-height: 62rpx;
				margin-right: 10rpx;
				flex-shrink: 0;
			}
	
			.isActive {
				color: #004DA1FF;
				background-color: #E5EDFFFF;
			}
		}
	
	// 	.filterContent {
	// 		width: 80rpx;
	// 		display: flex;
	// 		justify-content: center;
	// 		align-items: center;
	// 		position: relative;
	
	// 		.filterList {
	// 			display: flex;
	// 			flex-wrap: wrap;
	// 			flex-direction: column;
	// 			position: absolute;
	// 			background: #fff;
	// 			top: 60rpx;
	// 			right: 40rpx;
	// 			width: 240rpx;
	// 			background: #FFFFFF;
	// 			box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
	// 			border-radius: 10px 10px 10px 10px;
	// 			z-index: 9;
	
	// 			.item {
	// 				font-family: PingFang SC-Regular, PingFang SC;
	// 				font-weight: 400;
	// 				color: #666666;
	// 				border-bottom: 1px solid #EEEEEEFF;
	// 				height: 100rpx;
	// 				line-height: 100rpx;
	// 				padding: 0 30rpx;
	// 				display: flex;
	// 				flex-wrap: nowrap;
	// 				justify-content: space-between;
	// 				align-items: center;
	// 			}
	// 		}
	// 	}
	}

	.listContent {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		flex-wrap: nowrap;
		width: calc(100vw - 80rpx);
		overflow-x: auto;
		padding: 10rpx 40rpx;

		.listItem {
			border-radius: 20rpx;
			padding: 32rpx 20rpx;
			margin-bottom: 20rpx;
			width: calc(100% - 40rpx);
			overflow: hidden;
			background-color: #fff;
			box-shadow: 0px 1rpx 0rpx 1rpx rgba(230, 230, 230, .5);
			display: flex;
			flex-wrap: nowrap;

			.infoContent {
				padding-left: 20rpx;
			}

			.listTitle {
				line-height: 40rpx;
				margin-bottom: 20rpx;
				font-size: 30rpx;
				color: #333;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				letter-spacing: 2rpx;
			}

			.listInfo {
				color: #999999;
				font-size: 26rpx;
				line-height: 35rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				letter-spacing: 2rpx;
				height: 70rpx;
				font-family: PingFang SC-Regular, PingFang SC;
			}
			.detailInfo {
				display: flex;
				flex-wrap: nowrap;
				justify-content: space-between;
				flex-shrink: 0;
				padding-right: 20rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				font-size: 26rpx;
				margin-top:20rpx;
			}
		}
	}

	.contactUs {
		display: flex;
		justify-content: flex-start;
		flex-wrap: nowrap;
		width: calc(100vw - 80rpx);
		overflow-y: hidden;
		overflow-x: auto;
		padding: 10rpx 40rpx;

		.contactInfoContent {
			border-radius: 20rpx;
			padding: 26rpx 20rpx;
			margin-bottom: 20rpx;
			width: calc(100% - 40rpx);
			overflow: hidden;
			background-color: #fff;
			box-shadow: 0px 1rpx 0rpx 1rpx rgba(230, 230, 230, .5);
			display: flex;
			flex-wrap: nowrap;

			.contactInfo {
				height: 104rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				width: 55%;
			}

			.phoneContent,
			.emailContent {
				display: flex;
				justify-content: flex-start;
				flex-wrap: nowrap;
				flex-shrink: 0;
				font-size: 26rpx;
				color: #666666FF;
				align-items: center;
			}

			.phone,
			.email {
				padding-left: 8rpx;
				position: relative;
				top: -4rpx;
			}
		}

		.qrCodeContent {
			display: flex;
			justify-content: space-around;
			flex-wrap: nowrap;
			width: 45%;
		}
	}

	.copyright{
		position:fixed;
		bottom:100rpx;
		left:0;
		width:100%;
		background:#fff;
		.privacyStatement {
			color: #3C4C76FF;
			font-size: 24rpx;
			text-align: center;
			padding-top: 10rpx;
			padding-bottom: 14rpx;
			display: flex;
			flex-wrap: nowrap;
			justify-content: center;
			position: relative;
		
			.item {
				padding: 0 20rpx;
			}
		
			.specialItem {
				position: relative;
		
				&:after {
					content: "";
					display: inline-block;
					height: 22rpx;
					width: 2rpx;
					background-color: #BDBDBDFF;
					position: absolute;
					right: 0;
					top: calc(50% - 11rpx);
				}
			}
		}
		.privacyStatements {
			color: #666666FF;
			font-size: 22rpx;
			text-align: center;
			padding-bottom: 28rpx;
			display: flex;
			flex-wrap: nowrap;
			justify-content: center;
			position: relative;
		
			.item {
				padding: 0 20rpx;
			}
		
			.specialItem {
				position: relative;
		
				&:after {
					content: "";
					display: inline-block;
					height: 22rpx;
					width: 2rpx;
					background-color: #BDBDBDFF;
					position: absolute;
					right: 0;
					top: calc(50% - 11rpx);
				}
			}
		}
	}
	

	.copright {
		color: #999999FF;
		font-size: 26rpx;
		text-align: center;
		padding-bottom: 20rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
	}
	.loadMoreBtn {
		padding-bottom: 250rpx;
	}
</style>
